<template>
	<view>
		<view class="echarts" :id="option.id" :prop="option" :change:prop="echarts.update" @click="echarts.onClick"></view>
		
	</view>
</template>

<script>
	export default {
		name: 'myEcharts',
		props: {
			option: {
				type: Object,
				required: true
			}
		},
		created() {
			// 设置随机数id
			let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
			let len = t.length
			let id = ''
			for (let i = 0; i < 32; i++) {
				id += t.charAt(Math.floor(Math.random() * len))
			}
			this.option.id = id
		},
		methods: {
			/**
			 * renderjs内的点击事件，回调到父组件
			 * @param {Object} params
			 */
			onViewClick(params) {
				this.$emit('click', params)
			}
		}
	}
</script>

<script module="echarts" lang="renderjs" >
	// import * as echarts from '@/components/echarts/echarts.min.js'
	import * as echarts from 'echarts';
	// import { CanvasRenderer } from 'echarts/renderers';

	export default {
		data() {
			return {
				chart: null,
				clickData: {
					"value":[],
					"date":[],
					"name":""
				}// echarts点击事件的值
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			/**
			 * 初始化echarts
			 */
			init() {
				// 根据id初始化图表
				
				// this.chart = echarts.init(document.getElementById(this.option.id))
				this.chart = echarts.init(document.getElementById(this.option.id),null,{renderer:'svg'})
				// this.chart.getZr().off('click');
			
				this.update(this.option)
				// echarts的点击事件
				this.chart.on('click', params => {
					// 把点击事件的数据缓存下来
					console.log(params)
					// this.clickData = params
					
				})
			

			
			},
			/**
			 * 点击事件，可传递到外部
			 * @param {Object} event
			 * @param {Object} instance
			 */
			onClick(event, instance) {
				if (this.clickData) {
					// 把echarts点击事件相关的值传递到renderjs外
					instance.callMethod('onViewClick', {
						// value: this.clickData.data,
						value: this.clickData,
						// name: this.clickData.name,
						// seriesName: this.clickData.seriesName
					})
					// 上次点击数据置空
					this.clickData.value = [null,null,null]
					this.clickData.date = [null,null,null]
					this.clickData.name = ""
				}
			},
			/**
			 * 监测数据更新
			 * @param {Object} option
			 */
			update(option) {
				if (this.chart) {
					// 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数
					if (option) {
						// tooltip
						if (option.tooltip) {
							// 判断是否设置tooltip的位置
							if (option.tooltip.positionStatus) {
								option.tooltip.position = this.tooltipPosition()
							}
							// 判断是否格式化tooltip
							if (option.yAxis.inverse) {
									option.yAxis.axisLabel.formatter= function (value, index) {
										  switch(value){
											case 24:
											return '11:00'
											case 23:
											return '10:00'
											case 22:
											return '09:00'
											case 21:
											return '08:00'
											case 20:
											return '07:00'
											case 19:
											return '06:00'
											case 18:
											return '05:00'
											case 17:
											return '04:00'
											case 16:
											return '03:00'
											case 15:
											return '02:00'
											case 14:
											return '01:00'
											case 13:
											return '24:00'
											case 12:
											return '23:00'
											case 11:
											return '22:00'
											case 10:
											return '21:00'
											case 9:
											return '20:00'
											case 8:
											return '19:00'
											case 7:
											return '18:00'
											case 6:
											return '17:00'
											case 5:
											return '16:00'
											case 4:
											return '15:00'
											case 3:
											return '14:00'
											case 2:
											return '13:00'
											case 1:
											return '12:00'
											case 0:
											return '11:00'
										  }
									  };
						}		
								option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)
							// }
						}
					}
					// 设置新的option
					this.chart.setOption(option, option.notMerge)
				}
			},
			/**
			 * 设置tooltip的位置，防止超出画布
			 */
			tooltipPosition() {
				return (point, params, dom, rect, size) => {
					// 其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
					let x = point[0]
					let y = point[1]
					let viewWidth = size.viewSize[0]
					let viewHeight = size.viewSize[1]
					let boxWidth = size.contentSize[0]
					let boxHeight = size.contentSize[1]
					let posX = 0 // x坐标位置
					let posY = 0 // y坐标位置
					if (x >= boxWidth) { // 左边放的下
						posX = x - boxWidth - 1
					}
					if (y >= boxHeight) { // 上边放的下
						posY = y - boxHeight - 1
					}
					return [posX, posY]
				}
			},
			/**
			 * tooltip格式化
			 * @param {Object} unit 数值后的单位
			 * @param {Object} formatFloat2 是否保留两位小数
			 * @param {Object} formatThousands 是否添加千分位
			 */
			tooltipFormatter(unit, formatFloat2, formatThousands) {
				return params => {
					
					let result = ''
					unit=''
					// unit = unit ? unit : ''
					for (let i in params) {
						if (i == 0) {
							result += params[i].data.date
						}
						
						
						let value = '--'
						if (params[i].data !== null) {
							if(params[i].data.value===null){
								this.clickData.value[i] = null
								this.clickData.date[i] = null
								if(params[i].seriesName=='日间小睡'){
									this.clickData.name = "日间小睡"
								}else if(params[i].seriesName=='酒平均'||params[i].seriesName=='酒'){
									this.clickData.name = "酒"
								}
								
							}else{
								if(params[i].seriesName=='睡眠效率平均'){
									unit='%'
								}else if(params[i].seriesName=='睡眠效率'){
									unit='%'
								}else if(params[i].seriesName=='睡眠时长'||params[i].seriesName=='卧床时长'){
									unit='h'
								}else if(params[i].seriesName=='酒平均'||params[i].seriesName=='咖啡平均'){
									unit='杯'
								}else if(params[i].seriesName=='烟平均'){
									unit='根'
								}else if(params[i].seriesName=='咖啡'||params[i].seriesName=='酒'){
									
									unit='杯'
								}else if(params[i].seriesName=='烟'){
									unit='根'
								}else if(params[i].seriesName=='日间小睡'){
									this.clickData.name =  "日间小睡"
									unit='mins'
								}else if(params[i].seriesName=='睡眠指数'){
									unit='分'
								}else if(params[i].seriesName=='睡眠指数平均'){
									unit='分'
								}else if(params[i].seriesName=='运动步数'){
									unit='步'
								}
								if(params[i].seriesName=='酒平均'||params[i].seriesName=='酒'){
									this.clickData.name =  "酒"
								}
								value = params[i].data.value
								this.clickData.value[i] = value
								this.clickData.date[i] =  params[i].data.date
								
							}
						
							
							// 保留两位小数
							// if (formatFloat2) {
							// 	value = this.formatFloat2(value)
							// }
							// 添加千分位
							// if (formatThousands) {
							// 	value = this.formatThousands(value)
							// }
						}
						// #ifdef H5
						result += '\n' + params[i].seriesName + '：' + value + unit
						// #endif
						
						// #ifdef APP-PLUS
						result += '<br/>' + params[i].marker + params[i].seriesName + '：' + value + unit
						// #endif
					}
				
					return result
				}
			},
			/**
			 * 保留两位小数
			 * @param {Object} value
			 */
			formatFloat2(value) {
				let temp = Math.round(parseFloat(value) * 100) / 100
				let xsd = temp.toString().split('.')
				if (xsd.length === 1) {
					temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'
					return temp
				}
				if (xsd.length > 1) {
					if (xsd[1].length < 2) {
						temp = temp.toString() + '0'
					}
					return temp
				}
			},
			/**
			 * 添加千分位
			 * @param {Object} value
			 */
			formatThousands(value) {
				if (value === undefined || value === null) {
					value = ''
				}
				if (!isNaN(value)) {
					value = value + ''
				}
				let re = /\d{1,3}(?=(\d{3})+$)/g
				let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
					return s1.replace(re, '$&,') + s2
				})
				return n1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.echarts {
		width: 100%;
		height: 100%;
	}
</style>